<template>
	<view class="goods_details">
		<view class="house-images">
			<u-swiper radius="0" :height="180" :autoplay="false" :list="bannerList" indicator
				indicatorMode="line"></u-swiper>
		</view>
		<view class="goods_price">
			<p class="row">Price:${{formData.discount_price||'0.00'}}<span>${{formData.origin_price||'0'}}</span></p>
			<p class="row">Discount:{{formData.discount||'0'}}%</p>
			<p class="row">Discount:reach {{formData.reach||'0'}}  minus {{formData.minus||'0'}}</p>
		</view>
		<view class="goods_name">
			<p>{{formData.name}}</p>
			<span>{{formData.introduce}}</span>
		</view>
		<view class="details">
			<p>Details</p>
			<image v-for="(item,index) in detailList" :key="index" :src="item" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import {
		itemDetailForShoper
	} from '@/lib/service';
	export default {
		data() {
			return {
				itemid: "",
				bannerList: [],
				detailList: [],
				formData: null,
			}
		},
		onLoad(options) {
			this.itemid = options.itemid;
			if (this.itemid) {
				this.handleInfo()
			}
		},
		methods: {
			handleInfo() {
				itemDetailForShoper({
					itemid: this.itemid
				}).then((res) => {
					if (res.statusCode == 0) {
						this.formData = res.data;
						if (this.formData.imgurls) {
							this.bannerList = this.formData.imgurls.split(',') || []
						}
						if (this.formData.detailurls) {
							this.detailList = this.formData.detailurls.split(',')||[]
						}
					}
				}).catch((res) => {

				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.goods_details{
		width: 100%;
		min-height: 100%;
		position: absolute;
		left: 0;
		top:0;
		background: #fafafa;
	}
	.goods_price {
		margin: 28rpx;
		height: 180rpx;
		background: linear-gradient(180.14deg, #ffc29b 0.55%, #ffe6d1 54.22%, #fcfcfc 114.05%);
		border-radius: 22.9rpx;
		padding: 28rpx 24rpx;
		margin-bottom:0;

		p {
			font-family: PingFang SC;
			font-weight: 500;
			color: #fc721a;
			font-size: 26rpx;

			span {
				display: inline-block;
				margin-left: 20rpx;
				font-size: 24rpx;
				color: #999999;
				text-decoration: line-through;
			}
		}
	}
	.goods_name{
		margin: 28rpx;
		min-height: 115rpx;
		background: #ffffff;
		border-radius: 22.9rpx;
		padding: 28rpx 24rpx;
		margin-top: -60rpx;
		
		p {
			font-weight: 600;
			color: #333333;
			font-size: 30rpx;
		}
		span {
			display: inline-block;
			margin-top: 24rpx;
			color: #f39a4b;
			font-size: 26.72rpx;
		}
	}
	.details{
		margin: 28rpx;
		background: #ffffff;
		border-radius: 22.9rpx;
		padding: 28rpx 24rpx;
		p {
			font-weight: 600;
			color: #333333;
			font-size: 30rpx;
			padding-bottom:28rpx;
		}
		image{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
</style>